<!-- 轮播图组件 -->
<template>
  <div class="swipe-area">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in swipeData" :key="index">
        <!-- 懒加载方式 -->
        <img v-lazy="item.image" alt="轮播图图片" width="100%" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  props: ['swipeData'],
}

</script>
<style scoped>
  .swipe-area {
    /* 清除浮动，解决没有全部占满宽度的问题 */
    clear: both;
    /* 解决图片在开始懒加载的时候，指示点在刚开始在下面的问题 */
    max-height: 15rem;
    overflow: hidden;
  }
</style>
